<template>
    <view class="enroll-card bgc-ffffff p-20 rounded-20">
        <view class="enroll-card__header">
            <view class="enroll-card__status-icon enroll-card__status-icon--line"></view>
            <view class="enroll-card__status">报名中</view>
            <view class="enroll-card__stat">
                <view class="enroll-card__stat-current">已报名10人/</view>
                <view class="enroll-card__stat-total">招募50人</view>
            </view>
        </view>
        <view class="enroll-card__content">
            <view class="enroll-card__cover">
                <image src="/static/logo.png" mode="aspectFill"></image>
            </view>
            <view class="enroll-card__info">
                <view class="enroll-card__title">
                    2025年全国心理咨询师考试报名
                </view>
                <view class="enroll-card__address">
                    <uv-icon name="map"></uv-icon> 成都金牛
                </view>
                <view class="enroll-card__price">
                    <view class="enroll-card__price-new">￥19.9</view>
                    <view class="enroll-card__price-old">￥29.9</view>
                    <view class="enroll-card__price-btn">
                        <MyButton @click="handleClick" title="我要参与" :transition="true" color="#fff" size="mini"
                            borderRadius="25rpx">
                        </MyButton>
                    </view>
                </view>
            </view>
        </view>
        <view class="enroll-card__time">
            <view class="enroll-card__apply-time">
                报名时间：2025-03-04
            </view>
            <view class="enroll-card__start-time">
                活动时间：2025-03-04
            </view>
        </view>

    </view>
</template>
<style lang="scss" scoped>
    .enroll-card {
        margin-bottom: 25rpx;
        box-sizing: border-box;
        position: relative;

        &__status-icon {
            border: 6rpx #af74f4 solid;
            position: absolute;
            height: 18rpx;
            left: 0;
            top: 32rpx;
        }

        &__status {
            font-weight: bold;
            font-size: 30rpx;
        }

        &__header {
            display: flex;
            justify-content: space-between;
            padding-bottom: 30rpx;
        }

        &__stat {
            display: flex;
            font-size: 26rpx;
        }

        &__content {
            display: flex;
            height: 200rpx;


        }

        &__cover {
            image {
                width: 220rpx;
                height: 100%;
                border-radius: 20rpx;
            }

        }

        &__info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-left: 30rpx;
        }

        &__title {
            font-size: 32rpx;
        }

        &__address {
            font-size: 24rpx;
            color: #b3b5b8;
            display: flex;
        }

        &__price {
            display: flex;
            gap: 20rpx;
            padding-bottom: 10rpx;

            &-new {
                coLor: #e75485;
                font-weight: bold;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
            }

            &-old {
                font-size: 24rpx;
                coLor: #a6aab3;
                font-style: italic;
                text-decoration: line-through;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
            }

            &-btn {
                flex: 1;
                display: flex;
                justify-content: flex-end;
            }
        }

        &__time {
            font-size: 24rpx;
            color: #666a71;
            margin-top: 30rpx;
        }

        &__start-time {
            margin-top: 10rpx;
        }
    }
</style>
<script setup lang="ts">
    import Card from "@/components/Card.vue";
    import MyButton from "@/components/Button.vue";
    const emit = defineEmits(['click']);
    const handleClick = () => {
        emit('click');
    }
</script>